<template>
    <div class='h-100 relative'>
        <section class='flex'>
            <div style='flex:13' class='flex'>
                <div style='flex:9'>
                    <div class='user-info'>
                        <glass-box>
                            <div slot='title' class='color-f5f5f5'>用户性别</div>
                            <div class='m-t-10'>
                                <div class='sex-chart'>
                                    <sex-pie-chart v-model='sexCategoryData'></sex-pie-chart>
                                </div>
                            </div>
                        </glass-box>
                    </div>
                    <div class='user-info m-t-20'>
                        <glass-box>
                            <div slot='title' class='color-f5f5f5'>用户类型</div>
                            <div class='m-t-10'>
                                <div class='sex-chart'>
                                    <user-source-chart v-model='userSourceData'></user-source-chart>
                                </div>
                            </div>
                        </glass-box>
                    </div>
                </div>
                <div style='flex:11' id='charge-time' class='m-l-20'>
                    <glass-box>
                        <div slot='title' class='color-f5f5f5'>充电累积时间<span v-size.fontSize='14'>（小时）</span></div>
                        <div v-size.paddingLeft='55' class='m-t-10'>
                            <div>
                                <div class='color-a9abaf'>每30分钟更新一次</div>
                                <div class='m-t-30'>
                                    <charge-time-chart v-model='chargeTotalTimeData'></charge-time-chart>
                                </div>
                            </div>
                        </div>
                        <div v-size.marginTop='40'>
                            <div v-size.paddingLeft='55'>
                                <span class='color-f5f5f5 f-20'>截止昨日近七天充电时间<span v-size.fontSize='14'>（小时）</span></span>
                                <color-block-text class='m-l-20' type='line' color='#61bae3'>总充电</color-block-text>
                                <color-block-text class='m-l-20' type='dashed' color='#ee5252'>平均充电</color-block-text>
                            </div>
                            <div class='m-t-20'>
                                <div id='lately-charge-time'>
                                    <lately-charge-time-chart v-model='latelyChargeTimeData'></lately-charge-time-chart>
                                </div>
                            </div>
                        </div>
                    </glass-box>
                </div>
            </div>

            <div style='flex:7' id='recharge-amount' class='m-l-20'>
                <glass-box>
                    <div slot='title' class='color-f5f5f5'>充值累积金额<span v-size.fontSize='14'>（元）</span></div>
                    <div v-size.paddingLeft='55' class='m-t-10'>
                        <div>
                            <div class='color-a9abaf'>每30分钟更新一次</div>
                            <div class='m-t-30'>
                                <recharge-amount-chart v-model='rechargeTotalAmountData'></recharge-amount-chart>
                            </div>
                        </div>
                    </div>
                    <div class='m-t-40'>
                        <div v-size.paddingLeft='55'>
                            <span class='color-f5f5f5 f-20'>截止昨日近七天充值金额<span v-size.fontSize='14'>（元）</span></span>
                            <color-block-text class='m-l-20' type='line' color='#1c6ce4'>总充值</color-block-text>
                            <color-block-text class='m-l-20' type='dashed' color='#b1464b'>平均充值</color-block-text>
                        </div>
                        <div class='m-t-20'>
                            <div id='lately-charge-time'>
                                <lately-recharge-amount-chart v-model='latelyRechargeAmountData'></lately-recharge-amount-chart>
                            </div>
                        </div>
                    </div>
                </glass-box>
            </div>
        </section>

        <section class='flex m-t-20'>
            <div style='flex:13'>
                <div id='recharge-count'>
                    <glass-box>
                        <div slot='title' class='color-f5f5f5'>充值次数<span class='color-a9abaf f-14 m-l-10'>每30分钟更新一次</span></div>
                        <div class='flex m-t-20'>
                            <div v-flex='9'></div>
                            <div v-flex='11' class='m-l-20'>
                                <arrow-title><span slot='title'>充电次数</span></arrow-title>
                            </div>
                        </div>
                        <div class='flex m-t-10'>
                            <div style='flex:9'>
                                <lately-recharge-count-chart v-model='latelyRechargeCountData'></lately-recharge-count-chart>
                            </div>
                            <div style='flex:11' class='m-l-20'>
                                <lately-charge-count-chart v-model='latelyChargeCountData'></lately-charge-count-chart>
                            </div>
                        </div>
                    </glass-box>
                </div>
            </div>
            <div style='flex:7' class='m-l-20'>
                <div id='user-distribute'>
                    <glass-box>
                        <div slot='title' class='color-f5f5f5'>活跃用户地域分布</div>
                        <div class='m-t-10'>
                            <div>
                                <div class='color-a9abaf' v-size.paddingLeft='55'>截止昨日近七天，所有用户</div>
                                <div class='m-t-30' id='user-distribute-chart'>
                                    <user-distribute-chart v-model='userDistributeChartData'></user-distribute-chart>
                                </div>
                            </div>
                        </div>
                    </glass-box>
                </div>
            </div>
        </section>
    </div>
</template>

<script src='./index.js'></script>

<style scoped lang='scss' src='./index.scss'></style>